<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="js/flexible.js"></script>
		<!-- <script src="js/echarts.min.js"></script>-->
		<script src="js/echarts新版.js"></script>
		<script>
			window.onload=function(){
				var chartDom = document.getElementsByClassName('main')[0];
				var myChart = echarts.init(chartDom);
				var option;
				var colors=['red','orange','yellow','green','aqua','blue','purple']
				option = {
					// 前两个为图一线条颜色，后两个为图二线条颜色
				  color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
				  title: {
				    text: 'Customized Radar Chart'
				  },
				  legend: {},
				  radar: [
						// 第一个雷达图
				    {
							// 设置雷达维度样式，包括文字、颜色、最大最小值
				      indicator: [
				        { text: 'Indicator1', color: 'red',max:50,min:0 },
				        { text: 'Indicator2',max:50,min:0 },
				        { text: 'Indicator3',max:50,min:0 },
				        { text: 'Indicator4',max:50,min:0 },
				        { text: 'Indicator5',max:50,min:0 }
				      ],
							// 配合indicator修改样式
				      axisName: {
				        formatter: '【{value}】',
				        color: '#428BD4'
				      },
				      center: ['25%', '50%'],
							// 多少环
				      splitNumber: 5,
							// 圆形雷达图
				      shape: 'circle',
							// 半径大小（不设置圆形也有效
							radius: 120,
				      splitArea: {
				        areaStyle: {
									// 多少环（splitNumber）就多少颜色，
				          color: ['#7feaba', '#6ac7d1', '#76b2ea', '#7b74ea', '#ff55ff'],
				          shadowColor: 'rgba(0, 0, 0, 0.2)',
				          shadowBlur: 10
				        }
				      },
							// 维度线颜色
				      axisLine: {
				        lineStyle: {
				          color: 'rgba(0, 0, 0, 0.8)'
				        }
				      },
							// 环之间间隔线
				      splitLine: {
				        lineStyle: {
				          color: 'rgba(255, 0, 0, 0.8)'
				        }
				      }
				    },
						// 第二个雷达图
				    {
				      indicator: [
				        { text: 'Indicator1', max: 60 },
				        { text: 'Indicator2', max: 60 },
				        { text: 'Indicator3', max: 60 },
				        { text: 'Indicator4', max: 60 },
				        { text: 'Indicator5', max: 60 },
				        { text: 'Indicator6', max: 60 }
				      ],
				      center: ['75%', '50%'],
							// 半径大小（不设置圆形也有效
				      radius: 120,
				      axisName: {
				        color: '#fff',
								// 维度名称背景黑框
				        backgroundColor: '#666',
				        borderRadius: 3,
				        padding: [3, 5]
				      }
				    }
				  ],
				  series: [
				    {
							// 设置为雷达图
				      type: 'radar',
				      emphasis: {
								// 聚焦时的线宽
				        lineStyle: {
				          width: 4
				        }
				      },
				      data: [
				        {
				          value: [10, 20, 30, 40, 50],
				          name: 'Data A',
									label: {
									  show: true,
									  formatter: function (params) {
											console.log(params);
											// value即为这一项data值
									    return params.value;
									  }
									}
				        },
				        {
				          value: [50,40,30,20,10],
				          name: 'Data B',
				          areaStyle: {
				            color: 'rgba(255, 228, 52, 0.6)'
				          }
				        }
				      ]
				    },
				    {
				      type: 'radar',
				      radarIndex: 1,
				      data: [
				        {
				          value: [10, 20, 30, 40, 50, 60],
				          name: 'Data C',
									// 方点
				          symbol: 'rect',
				          symbolSize: 12,
				          lineStyle: {
										// 虚线
				            type: 'dashed'
				          },
				          label: {
				            show: true,
				            formatter: function (params) {
											console.log(params);
											// value即为这一项data值
				              return params.value;
				            }
				          }
				        },
				        {
				          value: [20, 40, 60, 10, 5, 55],
				          name: 'Data D',
									// 雷达内部渐变色
				          areaStyle: {
				            color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
				              {
				                color: 'rgba(255, 145, 124, 0.1)',
				                offset: 0
				              },
				              {
				                color: 'rgba(255, 145, 124, 0.9)',
				                offset: 1
				              }
				            ])
				          }
				        }
				      ]
				    }
				  ]
				};
				option && myChart.setOption(option);
				window.addEventListener('resize',()=>{
					myChart.resize()
				})
			}
		</script>
		<div style="width: 11rem;height: 8rem;margin:200px 50px;">
			<div class="main" style="width: 9rem;height: 5rem;margin-top: 50px;"></div>
		</div>
	</body>
</html>